<template>
  <div class="hello">
    <div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>
    <div v-if="type == 'user'">用户</div>
    <div v-else>邮箱</div>
    <button @click="change2">切换</button>
    <div :class="{'active' : isActive}">wewewewew</div>
    <h1 @click="change" v-text="msg"></h1>
    <h2>{{author}}</h2>
    <ul v-for="music in musics">
      <li @click="change">{{ music.name }}</li><br>
      <li>
        <img ref='dom' :src="music.album.picUrl" alt="" >
      </li>
    </ul>

  </div>
</template>

<script>
  import $ from 'jquery'
  import axios from 'axios';
  const PAI_PORXY = 'https://bird.ioliu.cn/v1/?url=';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'axios',
      author:"HMW",
      musics:[],
      type:"user",
      isActive: false,
      error: null,
      isA:true,
      isB:false
    }
  },
  computed: {
    classObject: function() {
      return {
        active:this.isActive && !this.error,
        active2:this.error == null
      }
    }
  },
  mounted: function () {
    console.log("mounted");
    const _this=this;
    axios.get(PAI_PORXY + 'http://music.163.com/api/playlist/detail?id=19723756')
      .then(function (res) {
        _this.musics = res.data.result.tracks;
        console.log(res);
      },function (error) {
        console.log(error);
      })
  },
  updated:function() {
    console.log(this.isActive);
    console.log("updated");
    $("img").css("width","50px");
  },
  methods:{
    change: function (event) {
      event.target.classList.add("active")
    },
    change2:function () {
      this.isActive =  !this.isActive;
      this.type = this.type == "user" ? "email" : "user"
      this.isA = !this.isA;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .active{
    color:red;
  }
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
